<template>
  <div id="app">
    <el-container class="app-container">
      <el-header class="header"><h1>系统管理</h1></el-header>
      <el-container  >
        <el-aside class="aside">
          <el-menu :default-active="$route.name" class="menu" @select="handleSelect">
            <el-menu-item index="zuzhi">
              <i class="el-icon-s-management"></i>
              <span slot="title">组织机构</span>
            </el-menu-item>
            <el-menu-item index="sahnxi">
              <i class="el-icon-office-building"></i>
              <span slot="title">部门管理</span>
            </el-menu-item>
            <el-menu-item index="quanxian">
              <i class="el-icon-s-data"></i>
              <span slot="title">权限管理</span>
            </el-menu-item>
            <el-menu-item index="shanxi">
              <i class="el-icon-user"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="biaoge">
              <i class="el-icon-user"></i>
              <span slot="title">部门表格</span>
            </el-menu-item>
          </el-menu>
          <div class="other-links">
            <div class="link" @click="goToZuzhi"></div>
            <div class="link" @click="goToBumen"></div>
            <div class="link" @click="goToQuanxian"></div>
            <div class="link" @click="goToYonghu"></div>
            <div class="link" @click="goToBiaoge"></div>
          </div>
        </el-aside>
          <RouterView></RouterView>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
.app-container {
  /* Set height of container to window height */
  height: 100%;

  .el-header {
    /* Add border to header and set its height to 40px */
    height: 20px;

    /* Align h1 to left and vertically center it */
    h1 {
      line-height: 60px;
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
  }
.el-menu{
  border: none;
}
  /* Set header width to 100% */
  .el-header {
    width: 300px;
    background-color: #fff;
  }

  .el-aside {
overflow: hidden;
text-align: center;
margin-right: 20px;
height: calc(100vh - 120px);


background-color: #fff;
}
}
</style>















<script>
export default {
  name: 'App',
  methods: {
    handleSelect(index) {
      if (this.$route.name !== index) {
        this.$router.push({ name: index })
      }
    },
    goToZuzhi() {
      if (this.$route.name !== 'zuzhi') {
        this.$router.push({ name: 'zuzhi' })
      }
    },
    goToBiaoge() {
      if (this.$route.name !== 'biaoge') {
        this.$router.push({ name: 'biaoge' })
      }
    },
    goToBumen() {
      if (this.$route.name !== 'sahnxi') {
        this.$router.push({ name: 'sahnxi' })
      }
    },
    goToQuanxian() {
      if (this.$route.name !== 'quanxian') {
        this.$router.push({ name: 'quanxian' })
      }
    },
    goToYonghu() {
      if (this.$route.name !== 'shanxi') {
        this.$router.push({ name: 'shanxi' })
      }
    }
  }
}
</script>